<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- !#1 准备一个 type file 框并隐藏 -->
  <input type="file" hidden id="oFile">
  <span id="oUploadBtn">上传</span>
  <img id="oImg" width="300"/>
  <!-- #2 准备上传按钮 -->
  <script>
    <!-- #3 点击上传按钮的时候，触发 input file 框的 click 事件 -->
    oUploadBtn.onclick = function() {
      oFile.click()
    }
    <!-- #4 监听 input file 框的 change 事件，通过 e.target.files 拿到文件信息 -->
    oFile.onchange = function(e) {
      <!-- #5 根据文件信息通过 URL.createObjectURL 生成 blobUrl -->
      // const blobUrl = URL.createObjectURL(e.target.files[0])
      // #6 把 blobUrl 给图片的 src
      // oImg.src = blobUrl
      // 前端也有办法把文件信息直接转成 base64
      const reader = new FileReader()
      // 监听读取的结果
      reader.onload = function() {
        oImg.src = this.result
      }
      // 可以把文件信息读成 base64
      reader.readAsDataURL(e.target.files[0])
    }
  </script>
</body>
</html>
